import React from 'react';

// 导入吸顶组件
import Sticky from '../../../components/Sticky'

import HousePackage from '../../../components/HousePackage';
import NavHeader from '../../../components/NavHeader';
import { Picker, List, InputItem, TextareaItem, ImagePicker, Grid, Toast } from 'antd-mobile';
// import { createForm } from 'rc-form';

import { API } from '../../../utils'

import './index.scss'

// 户型
const houseModel = [
  {
    label: '1室',
    value: '1室',
  },
  {
    label: '2室',
    value: '2室',
  },
  {
    label: '3室',
    value: '3室',
  },
  {
    label: '4室+',
    value: '4室+',
  },
];
// 楼层
const houseLevel = [
  {
    label: '高楼层',
    value: '高楼层'
  },
  {
    label: '中楼层',
    value: '中楼层'
  },
  {
    label: '低楼层',
    value: '低楼层'
  }
];

// 朝向
const houseFaces = [
  {
    label: '南',
    value: '南',
  },
  {
    label: '东南',
    value: '东南',
  },
  {
    label: '北',
    value: '北',
  },
  {
    label: '西北',
    value: '西北',
  },
  {
    label: '西',
    value: '西',
  },
];

// 图片文件
const fileData = [{
  url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
  id: '2121',
}, {
  url: 'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',
  id: '2122',
}];

class AddRent extends React.Component {
  constructor(props) {
    super(props);
    const community = this.props.history.location.state ? this.props.history.location.state : null

    this.state = {
      // 全是表单文件
      community: community,   // 小区名
      price: null,   // 房价
      size: null,   //建筑面积
      roomType: '',
      floor: '',
      oriented: '',
      title: '',
      description: '',
      houseImg: fileData,  // 图片文件
      supporting: ''    // 房屋配置
    }
  }

  // 输入内容变化
  handleChange = (name, value) => {
    console.log("111", name, value);
    this.setState({
      [name]: value,
    })
  }

  // 上传图片处理
  handleHouseImg = files => {
    console.log(files);
    this.setState({
      houseImg: files
    })
  }

  // 上传房源信息
  addHouse = async () => {
    const { title, description, oriented, supporting, price, roomType, size, floor, community, houseImg } = this.state;
    let newHouseImg;

    if (houseImg.length > 0) {
      // 已有上传图片
      const form = new FormData();
      houseImg.forEach(item => form.append('file', item.file))

      const res = await API.post('/houses/image', form, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      console.log(res);
      newHouseImg = res.data.body.join('|')
    }
    // 发布房源
    const res = await API.post('/user/houses', {
      title, description, oriented, supporting, price, roomType, size, floor, community: community.id, houseImg: newHouseImg
    })
    console.log(res);
    if (res.data.status == 200) {
      Toast.success('发布成功');
      this.props.history.push('/rent')
    } else {
      Toast.fail('失败喽~等会再试试')
    }
  }

  render() {
    const { price, size, roomType, floor, oriented, title, description, community, houseImg } = this.state;
    return (
      <div>
        {/* 顶部导航栏 */}
        <Sticky height={45}>
          <NavHeader name="发布房源" onLeftClick={() => {
            console.log('点击了左侧按钮')
          }} >发布房源</NavHeader>
        </Sticky>

        {/* 表单部分 */}
        <List renderHeader={() => '房源信息'}>
          {/* 小区名称关键词搜索 */}
          <div className="communityTitle">
            <span className="txt1">小区名称</span>
            <span className="txt2" onClick={() => this.props.history.push('./rent/search')}>{community ? community.name : '请选择所在小区'}</span>
          </div>

          {/* 租金和建筑面积两个输入的 */}
          <InputItem
            placeholder="清输入租金/月"
            extra="￥/月"
            value={price}
            onChange={(val) => this.handleChange('price', val)}
          >租金</InputItem>
          <InputItem
            clear
            placeholder="请输入建筑面积"
            extra="㎡"
            value={size}
            onChange={(val) => this.handleChange('size', val)}
          >建筑面积</InputItem>

          {/* 三个选择的 */}
          <Picker
            data={[houseModel]}
            title="户  型"
            cascade={false}
            extra="请选择"
            value={roomType}
            onChange={(val) => this.handleChange('roomType', val)}
          // onOk={val => this.setState({ ['roomType']: val })}
          >
            <List.Item arrow="horizontal">产  型</List.Item>
          </Picker>

          <Picker
            data={[houseLevel]}
            title="所在楼层"
            cascade={false}
            extra="请选择"
            value={floor}
            onChange={val => this.handleChange('floor', val)}
          >
            <List.Item arrow="horizontal">所在楼层</List.Item>
          </Picker>

          <Picker
            data={[houseFaces]}
            title="朝向"
            cascade={false}
            extra="请选择"
            value={oriented}
            onChange={val => this.handleChange('oriented', val)}
          >
            <List.Item arrow="horizontal">朝  向</List.Item>
          </Picker>

          <div className="houseTitle">
            <span className="houseTitle_info">房屋标题</span>
          </div>
          <TextareaItem
            value={title}
            rows={3}
            placeholder="请输入标题(例如:整租 小区名 2室 5000元)"
            onChange={val => this.handleChange('title', val)}
          />

          {/* 图像上传 */}
          <ImagePicker
            files={houseImg}
            onChange={this.handleHouseImg}
            selectable={houseImg.length < 5}
          />

          {/* 房屋配置(5x2宫格) */}
          <List
            className="listPackage"
          >
            <HousePackage select onSelect={(onSelectNames) => this.setState({ 'supporting': onSelectNames.join('|') })}></HousePackage>
          </List>

          {/* 房屋描述 */}
          <div className="houseTitle houseDescribe">
            <span className="houseTitle_info">房屋描述</span>
          </div>
          <TextareaItem
            value={description}
            rows={6}
            placeholder="请输入房屋描述信息"
            onChange={val => this.handleChange('description', val)}
          />

          {/* 最终提交 */}
          <List.Item>
            <div
              style={{ float: 'left', width: '50%', color: '#108ee9', textAlign: 'center' }}
              onClick={this.addHouse}
            >
              提交
            </div>
            <div
              style={{ float: 'left', width: '50%', color: '#108ee9', textAlign: 'center' }}
              onClick={() => this.props.history.go(-1)}
            >取消</div>
          </List.Item>
        </List>
      </div>
    )
  }
}

export default AddRent